import React, {useEffect, useState} from 'react';
import {connect} from "react-redux";
import {AlertCircle, Check, Plus} from "react-feather";
import {CardBody, CardTitle, CardHeader, Card, CardSubtitle, CardFooter} from "reactstrap";
import "../../../../../assets/scss/pages/schedules.scss"
import {parseUnixTime} from "../../../../../helpers/utils";
import {Button} from "reactstrap";
import {getSchedules} from "../../../../../redux/actions/schedules";
import {bindActionCreators} from "redux";
import Schedule from "./Schedule";
import Form from "./Form";
import {SET_SCHEDULE_VALUE} from "../../../../../redux/constants/schedules";
import {setFieldData} from "../../../../../redux/actions/helper";
import {PrivateProjectProvider} from "../../../../../providers/PrivateProjectProvider";

const Schedules = props => {
  const {eventId, event, getSchedules, reqParams, schedules, isOpenModal, setFieldData, verifyId, owner} = props
  const optionsDate = {month: 'long', day: 'numeric'}
  const [tooltipId, setTooltipId] = useState(null)
  const scrollBlockRef = React.createRef();


  useEffect(() => {
    getSchedules({...reqParams, event_id: eventId})
    return () => {

    };
  }, [eventId])


  return (
    <React.Fragment>
      {
        isOpenModal && <Form eventId={eventId}/>
      }

      <Card className={'schedule-card position-relative'}>
        <CardHeader className={'schedule-cardheader'}>
          <CardTitle>График</CardTitle>
          <CardSubtitle>{event.begin && parseUnixTime(event.begin).toLocaleString('ru', optionsDate)}</CardSubtitle>
        </CardHeader>
        <CardBody className={'schedule-cardbody'} innerRef={scrollBlockRef}>
          <ul className="activity-timeline timeline-left list-unstyled">
            {
              schedules && schedules.map((value, id) => {
                return <Schedule
                  key={id}
                  schedule={value}
                  eventId={eventId}
                  tooltipId={tooltipId}
                  setTooltipId={setTooltipId}
                  scrollBlockRef={scrollBlockRef}
                />
              })
            }
          </ul>
        </CardBody>
        <CardFooter className={'schedule-cardfooter'}>
          <PrivateProjectProvider owner={owner} verifyId={verifyId}>
            <Button.Ripple
              className='btn-block btn-footer'
              tag="button"
              size="md"
              color="danger"
              onClick={() => {
                setTooltipId(null)
                setFieldData(SET_SCHEDULE_VALUE, 'schedule_id', null)
                setFieldData(SET_SCHEDULE_VALUE, 'isOpenModal', true)
              }}
            >
              Добавить ПУНКТ
            </Button.Ripple>
          </PrivateProjectProvider>
        </CardFooter>
      </Card>
    </React.Fragment>
  );

}

const mapStateToProps = state => ({
  reqParams: state.schedules.reqParams,
  schedules: state.schedules.schedules,
  isOpenModal: state.schedules.isOpenModal,
  verifyId: state.users.data.verify_id,
  owner: state.eventInfo.event.project.owner && state.eventInfo.event.project.owner.id || null,
});
const mapDispatchToProps = dispatch => bindActionCreators({
  getSchedules,
  setFieldData
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Schedules);
